<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      background-color: #aaa;
    }
    div {
      position: relative;
      margin: 0;
      padding: 0;
    }
    .box {
      width: 320px;
      height: 620px;
      margin: 50px auto;
      background-color: #222;
      border: 10px solid #333;
      border-radius: 55px;
      box-shadow: 3px 5px 5px rgba(0, 0, 0, .5);
      box-sizing: border-box;
    }
    .box::before {
      content: '';
      position: absolute;
      top: 100px;
      left: -16px;
      width: 6px;
      height: 45px;
      background-color: #222;
      border-radius: 3px 0 0 3px;
    }
    .box::after {
      content: '';
      position: absolute;
      top: -16px;
      right: 60px;
      width: 66px;
      height: 6px;
      background-color: #222;
      border-radius: 3px 3px 0 0;
    }
    .screen {
      width: 250px;
      height: 450px;
      line-height: 450px;
      margin: 80px auto 0;
      color: #fff;
      font-size: 34px;
      text-align: center;
      background: -webkit-linear-gradient(-45deg, #555 10%, #333 30%, #000 100%);
      border: 4px solid #1a1a1a;
    }
    .screen::before {
      content: '';
      position: absolute;
      top: -54px;
      left: 117px;
      width: 12px;
      height: 12px;
      background-color: #222;
      border: 3px solid #666;
      border-radius: 50%;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
      box-sizing: border-box;
    }
    .screen::after {
      content: '';
      position: absolute;
      top: -34px;
      left: 90px;
      width: 70px;
      height: 15px;
      background-color: #222;
      border: 5px solid #666;
      border-radius: 8px;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
      box-sizing: border-box;
    }
    .button {
      width: 50px;
      height: 50px;
      margin: 5px auto;
      border-radius: 50%;
      background-color: #111;
    }
    .button::before {
      content: '';
      position: absolute;
      top: 13px;
      left: 13px;
      width: 24px;
      height: 24px;
      border: 2px solid #ddd;
      border-radius: 2px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="screen">iphone 4s</div>
    <div class="button"></div>
  </div>
</body>
</html>